<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>功能示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .section {
            margin-bottom: 30px;
        }
        .section h2 {
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
        }
        .input-group {
            margin-top: 10px;
        }
        .input-group input {
            padding: 5px;
            width: 200px;
        }
        .output {
            margin-top: 10px;
            font-weight: bold;
        }
        #dynamic-container {
            margin-top: 10px;
        }
        #dynamic-container .textbox {
            margin-bottom: 5px;
        }
    </style>
</head>
<body>

    <div class="section" id="section1">
        <h2>1. 反向输出字符串</h2>
        <div class="input-group">
            <input type="text" id="input1" placeholder="请输入字符串">
        </div>
        <button onclick="reverseString()">反向输出</button>
        <div class="output" id="output1"></div>
    </div>

    <div class="section" id="section2">
        <h2>2. 统计字母 'r' 的数量</h2>
        <div class="input-group">
            <input type="text" id="input2" placeholder="请输入第一个字符串">
            <input type="text" id="input3" placeholder="请输入第二个字符串">
        </div>
        <button onclick="countR()">统计 'r'</button>
        <div class="output" id="output2"></div>
    </div>

    <div class="section" id="section3">
        <h2>3. 获取字符串中第 i 个字符</h2>
        <div class="input-group">
            <input type="text" id="input4" placeholder="请输入字符串">
            <input type="number" id="input5" placeholder="请输入位置">
        </div>
        <button onclick="getCharacter()">获取字符</button>
        <div class="output" id="output3"></div>
    </div>

    <div class="section" id="section4">
        <h2>4. 添加动态文本框并显示当前时间</h2>
        <button onclick="addTextbox()">添加文本框</button>
        <div id="dynamic-container"></div>
    </div>

    <script>
        // 1. 反向输出字符串
        function reverseString() {
            const input = document.getElementById('input1').value;
            const reversed = input.split('').reverse().join('');
            document.getElementById('output1').textContent = `反向输出: ${reversed}`;
        }

        // 2. 统计字母 'r' 的数量
        function countR() {
            const input2 = document.getElementById('input2').value;
            const input3 = document.getElementById('input3').value;
            const count = (input2 + input3).toLowerCase().split('r').length - 1;
            document.getElementById('output2').textContent = `字母 'r' 的数量: ${count}`;
        }

        // 3. 获取字符串中第 i 个字符
        function getCharacter() {
            const input = document.getElementById('input4').value;
            const index = parseInt(document.getElementById('input5').value) - 1;
            if (index < 0 || index >= input.length) {
                document.getElementById('output3').textContent = '位置超出范围';
            } else {
                const character = input.charAt(index);
                document.getElementById('output3').textContent = `第 ${index + 1} 个字符: ${character}`;
            }
        }

        // 4. 添加动态文本框并显示当前时间
        function addTextbox() {
            const container = document.getElementById('dynamic-container');
            const textbox = document.createElement('input');
            textbox.type = 'text';
            textbox.className = 'textbox';
            const now = new Date();
            const formattedTime = now.getFullYear() + '-' + 
                                  String(now.getMonth() + 1).padStart(2, '0') + '-' + 
                                  String(now.getDate()).padStart(2, '0') + ' ' + 
                                  now.getHours() + ':' + 
                                  String(now.getMinutes()).padStart(2, '0') + ':' + 
                                  String(now.getSeconds()).padStart(2, '0');
            textbox.value = formattedTime;
            container.appendChild(textbox);
        }
    </script>

</body>
</html>